<template>
  <div>
    <a-form style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        :label="$t('payment')"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
<!--        项目名称-->
        <a-input v-model="project.projectName" placeholder="请输入项目名称"/>
      </a-form-item>
<!--      项目分类-->
      <a-form-item
        :label="$t('collection')"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        <a-select style="width: 100px" @change="handleChange">
          <a-select-option v-for="item in projectClassList" :key="item.project_class_id" :value="item.project_class_id">
            {{ item.project_class_name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <!--      项目申报理由-->
      <a-form-item
          :label="$t('transferAmount')"
          :labelCol="{span: 7}"
          :wrapperCol="{span: 17}"
      >
        <a-input v-model="project.projectReasion"/>
      </a-form-item>
<!--      项目简介-->
      <a-form-item
        :label="$t('collectionName')"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        <a-textarea placeholder="请填写项目简要介绍" v-model="project.projectTip"/>
      </a-form-item>
<!--      项目详情-->
      <a-form-item
        :label="$t('projectContent')"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        <a-textarea placeholder="请填写项目详情" v-model="project.projectContent"/>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 17, offset: 7}">
        <a-button type="primary" @click="nextStep">{{$t('nextStep')}}</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  name: 'Step1',
  i18n: require('./i18n'),
  data() {
    return {
      url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
      project: {
        projectName: "",
        projectTip: "",
        projectContent: "",
        projectReasion: "",
        projectClassId: 0,
      },
      projectClassList: [],
    }
  },
  computed: {
  },
  methods: {
    nextStep () {
      this.$emit('getProjectInfo', this.project)
      this.$emit('nextStep')
    },
    // 下拉框
    handleChange(value) {
      // 获取所选项目类型id
      this.project.projectClassId = value
    },
    // 获取项目分类
    getAllProjectClass() {
      Axios.get(this.url + '/pxManagerSystem/getAllProjectClass')
          .then(res => {
            this.projectClassList = res.data.data.projectClassList
          }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    this.getAllProjectClass()
  }
}
</script>

<style scoped>

</style>
